<template>
  <span class="yt-time" @click="pickTime">
    <span v-if="!value">请选择 <i class="yt-time-right yt-icon yt-icon-right"></i></span>
    <yt-tag class="yt-time-tag" v-else>{{ currentValue }}</yt-tag>
  </span>
</template>

<script type="text/ecmascript-6">
  import { Picker } from '../index'
  import { moment } from '../utils/moment'

  export default {
    name: 'yt-time',
    inject: {
      ytForm: {
        default: () => ({})
      }
    },
    props: {
      /**
       * 是否禁用
       */
      disabled: {
        type: Boolean,
        default: false
      },
      /**
       * 时间取值
       * @model
       */
      value: {},
      /**
       * 时间格式  YYYY-MM-DD HH:mm
       */
      format: {
        type: String,
        default: 'YYYY-MM-DD'
      },
      /**
       * 显示文字
       */
      showTemplate: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      _disabled() {
        return this.disabled || (this.ytForm || {}).disabled
      },
      currentValue() {
        if (!this.value) return ''
        let date = new moment(this.value)
        return date._isValid ? date.format(this.format) : this.value
      }
    },
    methods: {
      pickTime() {
        if (this._disabled) return
        Picker({
          title: '请选择时间',
          showTemplate: this.showTemplate,
          format: this.format,
          current: this.value,
          confirm: (res) => {
            this.$emit('input', res)
          }
        })
      }
    }
  }
</script>
